{extends file="base.html"}

{*轮播图*}
{block name="lunbo"}
<div class="row">		
	<div class="col-md-8">
		<img class="img-responsive" src="./public/images/1.jpg" width="100%" height="200">
	</div>
	<div class="col-md-4">
		<div class="card hidden-xs">
			 <h1>我的名片</h1>
			  <p>名称: <a href="#">静候花开</a></p>
			  <p>职业：<a href="#">PHP程序媛</a></p>
			  <p>QQ：<a href="#">2036488375</a></p>
			  <p>Email：<a href="#">lxs_2036488375@163.com</a></p>
			  <ul class="linkmore">
				<li><a href="" class="talk" title="给我留言"></a></li>
				<li><a href="/" class="address" title="联系地址"></a></li>
				<li><a href="/" class="email" title="给我写信"></a></li>
				<li><a href="/" class="photos" title="生活照片"></a></li>
				<li><a href="/" class="heart" title="关注我"></a></li>
			  </ul>
		</div>
	</div>
</div>
{/block}

{*主要内容*}
{block name="content"}
	<!-- 文章推荐 -->
	<h2 class="news-tit">
		文章推荐
	</h2>
	{foreach $hot as $h}
	<div class="row items">
		<div class="col-md-4"><img class="img-responsive" src="./public/images/{$h.pic}" /></div>
		<div class="col-md-8">
			<h3 class="tit"><a href="index.php?a=content&id={$h.id}">{$h.title}</a></h3>
			<p class="info">{$h.abstract}</p>
			<p class="autor">
				<a href="#"  class="bk"><i class="glyphicon glyphicon-user"></i>{$h.author}</a>
				<a href="#"  class="date"><i class="glyphicon glyphicon-time"></i>{$h.addtime|date_format:"%Y-%m-%d"}</a>
				<a href="#"  class="pull-right  pl"><i class="glyphicon glyphicon-comment"></i>评论(30)</a>
				<a href="#"  class="pull-right ll"><i class="glyphicon glyphicon-tags"></i>浏览({$h.clicks})</a>
			</p> 
		</div>
	</div>
	{/foreach}
	
{/block}

{*侧边栏*}
{block name="aside"}
	<!-- 热门推荐 -->
	<div class="panel panel-default margin-top">
	    <div class="panel-heading">热门推荐</div>
	    <div class="panel-body">
	        <ul class="nav nav-tabs" id="myTab"> 
		      <li class="active"><a href="#home" data-toggle='tab'>最热</a></li> 
		      <li><a href="#jishu" data-toggle='tab'>技术</a></li> 
		      <li><a href="#life" data-toggle='tab'>生活</a></li>  
		    </ul> 
		       
		    <div class="tab-content"> 
		      <div class="tab-pane active" id="home">
					<ul class="list-group">
						{foreach $hot as $h}
		  				<li class="list-group-item">
		  					<a href="index.php?a=content&id={$h.id}" style="color:#272a30;" >
		  					<span class="glyphicon glyphicon-fire" aria-hidden="true">{$h.title}
		  					</span>
		  					</a>
		  				</li>
						{/foreach}
		  			</ul>
		      </div> 
		      <div class="tab-pane" id="jishu">
					<ul class="list-group">
						{foreach $jishuhot as $jh}
		  				<li class="list-group-item">
		  					<a href="index.php?a=content&id={$jh.id}" style="color:#272a30;" >
		  						<span class="glyphicon glyphicon-fire" aria-hidden="true">{$jh.title}
		  						</span>
		  					</a>
		  				</li>
						{/foreach}
		  			</ul>
		      </div> 
		      <div class="tab-pane" id="life">
					<ul class="list-group">
						{foreach $lifehot as $lh}
		  				<li class="list-group-item">
		  					<a href="index.php?a=content&id={$lh.id}" style="color:#272a30;" >
		  						<span class="glyphicon glyphicon-fire" aria-hidden="true">{$lh.title}
		  						</span>
		  					</a>
		  				</li>
						{/foreach}
		  			</ul>
		      </div> 
		    </div> 
	    </div>
    </div>
	<!-- 最新文章 -->
	 <div class="panel panel-default margin-top">
		<!-- Default panel contents -->
		<div class="panel-heading">最新文章</div>
		<ul class="list-group">
		  {foreach $new as $n}
		  	<li class="list-group-item"><a href="index.php?a=content&id={$n.id}" style="color:#272a30;" ><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>{$n.title}</a></li>
		  {/foreach}
		</ul>
	</div>
{/block}
			

{*主页扩展*}	
{block name="kuozhan"}		
	<!-- 灰色部分 -->
	<div class="row gray">
		<div class="col-md-6">
			<h2 class="news-tit">get新技能</h2>
			<!-- 推荐最热 -->
			<div class="row">
				<div class="col-md-4">
					<img class="img-responsive" src="./public/images/11.jpg" />
				</div>
				<div class="col-md-8">
					<h3 class="xtit"><a href="#">一段小程序带你走进Generator生成器函数</a></h3>
					<p class="xinfo">generator指当你在执行一个函数的时候,你可以在函数的某一个点暂停函数的执行</p>
				</div>
			</div>
			<!-- 列表 -->
			<ul class="margin-top little-list">
				{foreach $jishu as $j}
				<li><a href="index.php?a=content&id={$j.id}" class="glyphicon glyphicon-leaf">{$j.title}</a><span class="pull-right">{$j.addtime|date_format:"%Y-%m-%d"}</span></li>
				{/foreach}
				<li></li>
			</ul>
		</div>
		<div class="col-md-6">
			<h2 class="news-tit">情感日记</h2>
			<!-- 推荐最热 -->
			<div class="row">
				<div class="col-md-4">
					<img class="img-responsive" src="./public/images/11.jpg" />
				</div>
				<div class="col-md-8">
					<h3 class="xtit"><a href="#">一段小程序带你走进Generator生成器函数</a></h3>
					<p class="xinfo">generator指当你在执行一个函数的时候,你可以在函数的某一个点暂停函数的执行</p>
				</div>
			</div>
			<!-- 列表 -->
			<ul class="margin-top little-list">
				{foreach $life as $l}
				<li><a href="index.php?a=content&id={$l.id}" class="glyphicon glyphicon-leaf">{$l.title}</a><span class="pull-right">{$l.addtime|date_format:"%Y-%m-%d"}</span></li>
				{/foreach}
				<li></li>
			</ul>
		</div>
	</div>
	<!-- 个人相册 -->
	<div class="row">
		<h2 class="news-tit">个人相册</h2>
		<div class="col-md-3">
			<img class="img-responsive" src="./public/images/11.jpg" />
		</div>
		<div class="col-md-3">
			<img class="img-responsive" src="./public/images/22.jpg" />
		</div>
		<div class="col-md-3">
			<img class="img-responsive" src="./public/images/33.jpg" />
		</div>
		<div class="col-md-3">
			<img class="img-responsive" src="./public/images/22.jpg" />
		</div>
	</div>	
				
{/block}
